<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
    </head>
    <body>
        <form action="#">
            <div>
                <label>用户名：</label>
                <input id="username" type="text">
            </div>
            <div>
                <label>密码：</label>
                <input id="pwd" type="password">
            </div>
            <input id="getData" type="button" value="获取数据">
            <input id="save" type="button" value="保存">
        </form>
        <script src="../js/mock-min.js"></script>
        <script>
            
            mockFetch(Mock);
            // console.log(mockFetch);
            let ary = [10,20,30,40,50]
            let data = Mock.mock({
                // 属性 list 的值是一个数组，其中含有 1 到 10 个元素
                "list|1-10": [
                    {
                        // 属性 id 是一个自增数，起始值为 1，每次增 1
                        "lid|+1": 1,
                        "age|20-30":1,
                        "cnt|2":ary,
                        "gender":/[男女]/,
                        "number":"@natural(5,20)",
                        "str":"@string",
                        "join":"@now",
                        "image":"@image",
                        "text":"@cname",
                        "url":"@url('http')",
                        "email":"@email('qq.com')",
                        "ip":"@ip",
                        "addr":"@region",
                        'my':"@capitalize('hello')",
                        "myid":"@increment"
                    },
                ],
            });
            // 输出结果
            console.log(JSON.stringify(data,null,4));

            Mock.mock(/\/getData/,"get",function(options){
                console.log(options);
                return {
                    "list|1-10":[{
                        "id|+1":1
                    }]
                }
            });
            Mock.mock("/save","post",function(options){
                console.log("post",options);
                return {
                    status:1
                }
            });

            let getData = document.getElementById("getData");
            let save = document.getElementById("save");
            let username = document.getElementById("username");
            let pwd = document.getElementById("pwd");
            getData.onclick = function(){
                let xhr = new XMLHttpRequest();
                xhr.onreadystatechange = function(){
                    if(xhr.readyState == 4 && xhr.status == 200){
                        let result = JSON.parse(xhr.responseText);
                        console.log(typeof result);
                    }
                }
                // xhr.open("get","/getData");
                // xhr.send();
                console.log('fetch:',fetch);
                fetch("/getData").then(response => response.json())
                .then(data => console.log("data",data));
            }
            save.onclick = function(){
                let xhr = new XMLHttpRequest();
                xhr.onreadystatechange = function(){
                    if(xhr.readyState == 4 && xhr.status == 200){
                        let result = JSON.parse(xhr.responseText);
                        console.log(result.status);
                    }
                }
                xhr.open("post","/save");
                xhr.send({username:username.value,pwd:pwd.value});
            }
        </script>
    </body>
</html>
